let treesArr = [
  {
    id: "0",
    text: "所有大类",
    level: 0,
    nodes: [
      {
        id: "4",
        text: "生产设备",
        level: 1,
        nodes: [
          { id: "8", text: "平缝机", level: 2, nodes: null },
          { id: "9", text: "双针机", level: 2, nodes: null },
          { id: "7", text: "包缝机", level: 2, nodes: null },
          { id: "4", text: "钉扣机", level: 2, nodes: null },
          { id: "5", text: "打结机", level: 2, nodes: null },
          { id: "6", text: "绷缝机", level: 2, nodes: null },
          { id: "3", text: "贴袋机", level: 2, nodes: null },
          { id: "42", text: "模板机", level: 2, nodes: null },
          { id: "43", text: "特种机", level: 2, nodes: null },
          { id: "40", text: "无缝机", level: 2, nodes: null },
          { id: "44", text: "剪线机", level: 2, nodes: null },
        ],
      },
      {
        id: "3",
        text: "工具配件",
        level: 1,
        nodes: [
          { id: "1", text: "拉筒", level: 2, nodes: null },
          { id: "2", text: "压脚", level: 2, nodes: null },
          { id: "21", text: "模具", level: 2, nodes: null },
          { id: "22", text: "模版", level: 2, nodes: null },
        ],
      },
      {
        id: "2",
        text: "电气设备",
        level: 1,
        nodes: [
          { id: "12", text: "变压器", level: 2, nodes: null },
          { id: "16", text: "风机", level: 2, nodes: null },
          { id: "15", text: "水泵", level: 2, nodes: null },
          { id: "13", text: "开关", level: 2, nodes: null },
          { id: "14", text: "交流接触器", level: 2, nodes: null },
        ],
      },
      {
        id: "5",
        text: "电脑通讯",
        level: 1,
        nodes: [
          { id: "17", text: "电脑", level: 2, nodes: null },
          { id: "18", text: "服务器", level: 2, nodes: null },
          { id: "19", text: "打印机", level: 2, nodes: null },
          { id: "39", text: "RFID读卡器", level: 2, nodes: null },
        ],
      },
      {
        id: "1",
        text: "后勤资产",
        level: 1,
        nodes: [
          { id: "11", text: "空调", level: 2, nodes: null },
          { id: "10", text: "汽车", level: 2, nodes: null },
        ],
      },
      {
        id: "6",
        text: "警用器材",
        level: 1,
        nodes: [
          { id: "26", text: "警棍", level: 2, nodes: null },
          { id: "30", text: "防暴头盔", level: 2, nodes: null },
          { id: "23", text: "手铐", level: 2, nodes: null },
          { id: "27", text: "防暴叉", level: 2, nodes: null },
          { id: "24", text: "脚镣", level: 2, nodes: null },
          { id: "28", text: "盾牌", level: 2, nodes: null },
          { id: "25", text: "对讲机", level: 2, nodes: null },
          { id: "29", text: "防暴服", level: 2, nodes: null },
        ],
      },
      {
        id: "7",
        text: "运输工具",
        level: 1,
        nodes: [
          { id: "31", text: "汽车", level: 2, nodes: null },
          { id: "32", text: "消防车", level: 2, nodes: null },
          { id: "33", text: "救护车", level: 2, nodes: null },
          { id: "35", text: "液压车", level: 2, nodes: null },
          { id: "34", text: "电瓶车", level: 2, nodes: null },
          { id: "36", text: "堆高车", level: 2, nodes: null },
          { id: "37", text: "物料车", level: 2, nodes: null },
        ],
      },
    ],
  },
];
let categorys = [];
// 生成一个用于拼接的空数组
let str = "";
// 默认首个为头并加上状态
let statuss = true;
// 控制三角图标
let flag = false;
let epiboly = document.getElementsByClassName("epiboly")[0];
let treeId = "";
let existArr = [];
// 初始化数据
function initData() {
  categorys = treeToArr(treesArr);
  console.log(categorys);
  showData(treesArr);
  let lis = document.querySelectorAll(".epiboly ul li");
  for (let i = 0; i < lis.length; i++) {
    if (categorys[i]) {
      lis[i].id = categorys[i].id;
      lis[i].level = categorys[i].level;
    }
    lis[i].addEventListener(
      "click",
      function (event) {
        handleItem(event);
      },
      false
    );
  }
}
initData();

// 点击每一项
function handleItem(event) {
  let index = existArr.indexOf(event.target.id);
  console.log(index);
  if (index > -1) {
    flag = false;
    existArr.splice(index, 1);
  } else {
    flag = true;
    existArr.push(event.target.id);
  }
  console.log(flag);
  var lis = document.querySelectorAll(".epiboly ul li");
  for (let i = 0; i < lis.length; i++) {
    lis[i].style.fontWeight = "500";
  }
  event.target.style.fontWeight = "bold";
  if (event.target.firstElementChild) {
    // flag = !flag;
    if (flag) {
      event.target.innerHTML =
        `<svg
        t="1675081345062"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3206"
        width="20"
        height="20"
        >
        <path
          d="M750.331 457.203l-238.576 238.087-238.087-238.576z"
          fill="#515151"
          p-id="3207"
        ></path>
        </svg>` + event.target.innerText;
    } else {
      event.target.innerHTML =
        `<svg
        t="1675070900646"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2847"
        width="20"
        height="20"
        >
        <path
          d="M384.30607 256.204389l0 512.41186 320.259338-256.206443L384.30607 256.204389z"
          fill="#707070"
          p-id="2848"
        ></path>
        </svg>` + event.target.innerText;
      event.target.style.fontWeight = 500;
    }
  }
}

// 处理类型树形结构
function treeToArr(data) {
  const result = [];
  data.forEach(function (item) {
    const loop = function (data) {
      console.log(data);
      result.push(data);
      let child = data.nodes;
      if (child) {
        for (let i = 0; i < child.length; i++) {
          loop(child[i]);
        }
      }
    };
    loop(item);
  });
  return result;
}

// 渲染函数
function showData(data) {
  // 先判断他的状态为什么
  if (statuss) {
    // 确认为开头
    str += "<ul>";
  } else {
    // 确认为下属，隐藏
    str += '<ul style="display:none">';
  }
  // 循环数组的长度次数
  for (let i = 0; i < data.length; i++) {
    // 循环判断每次拼接后它有没有附属,有就加img
    if (data[i].nodes) {
      // 每循环一次就拼接上内容
      // p标签是为了确保每一行的行高
      if (!flag) {
        str +=
          "<p></p>" +
          "<li>" +
          ` <svg
        t="1675070900646"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2847"
        width="20"
        height="20"
      >
        <path
          d="M384.30607 256.204389l0 512.41186 320.259338-256.206443L384.30607 256.204389z"
          fill="#707070"
          p-id="2848"
        ></path>
      </svg>` +
          data[i].text +
          " " +
          "</li>";
      } else {
        str += "<p></p>" + "<li>" + ` ` + data[i].text + " " + "</li>";
      }
      // 有的话就改为false
      statuss = false;
      // 并重新调用函数传参
      showData(data[i].nodes);
    } else {
      str += "<p></p>" + "<li>" + data[i].text + "</li>";
    }
  }
  // 拼接上结尾标签
  str += "</ul>";
  epiboly.innerHTML = str;
  return str;
}

// 根据点击显示与隐藏 (部门)
epiboly.addEventListener("click", function (e) {
  console.log(e);
  // 如果点击的那个元素，有下级元素，就展开  nextSibling
  let a = e.target.nextSibling;
  // 判断是否有子元素
  if (e.target.nextSibling != null) {
    console.log(a.nodeName);
    // 确认获取到的是点击的那个li标签
    if (e.target.nodeName == "LI" && a.nodeName == "UL") {
      // 判断是否处于none
      if (a.style.display == "none") {
        a.style.display = "block";
      } else if (a.style.display == "block") {
        a.style.display = "none";
      }
    }
  }
});
